<template>
  <div id="mars3dBox" class="mars3d-container"></div>
</template>

<script>
import Vue from "vue";
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
export default {
  data() {
    return {
      mapOptions: {
        terrain: {
          url: "//data.mars3d.cn/terrain",
          show: true,
        },
        basemaps: [
          {
            pid: 10,
            name: "星图影像",
            icon: "/img/basemaps/tdt_img.png",
            type: "group",
            layers: [
              {
                name: "底图",
                type: "xyz",
                // url: "https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?token=82455ef06c72bb3a35bbb4d7d05fd9eceb96a94dc942a056b8feb0e5928ed96f",
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                // url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                subdomains: "123",
              },
              {
                name: "注记",
                type: "xyz",
                url: "https://tiles{s}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?token=82455ef06c72bb3a35bbb4d7d05fd9eceb96a94dc942a056b8feb0e5928ed96f",
                subdomains: "123",
              },
            ],
            show: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.initMars3d();
  },
  beforeDestroy() {
    this.$Map.destroy();
    console.log(">>>>> 地图卸载完成 >>>>");
  },
  methods: {
    initMars3d() {
      var map = new window.mars3d.Map(mars3dBox, this.mapOptions);
      console.log(">>>>> 地图创建成功 >>>>");
      Vue.prototype.$Map = map;
      this.onMapload(map);
    },
    onMapload(map) {
      // 以下为演示代码

      // 创建entity图层
      const graphicLayer = new window.mars3d.layer.GraphicLayer();
      map.addLayer(graphicLayer);
      this.substream(map);
    },
    //广州边界
    substream(map) {
      const graphic = new window.mars3d.layer.GeoJsonLayer({
        center: {
          lat: 22.197354,
          lng: 113.132174,
          alt: 98777,
          heading: 19,
          pitch: -41.8,
        },
        url: "https://geo.datav.aliyun.com/areas_v3/bound/440100_full.json",
        symbol: {
          type: "wall",
          styleOptions: {
            diffHeight: 2500, // 墙高
            materialType: window.mars3d.MaterialType.LineFlow,
            materialOptions: {
              color: "#00ffff", // 颜色
              opacity: 0.6, // 透明度
              image: "http://mars3d.cn/img/textures/fence.png", // 图片
              repeatX: 1, // 重复数量
              axisY: true, // 竖直方向
              speed: 10, // 速度
            },
            // 高亮时的样式
            highlight: {
              type: "click",
              color: "#ffff00",
            },
          },
        },
        flyTo: true, //自动定位
      });
      map.addLayer(graphic);
    },
  },
};
</script>

<style>
.mars3d-container {
  height: 100%;
  overflow: hidden;
}

/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
  top: auto !important;
  bottom: 35px !important;
  left: 12px !important;
  right: auto !important;
}
.cesium-toolbar-button img {
  height: 100%;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
  margin-bottom: 5px;
  float: left;
  clear: both;
  text-align: center;
}
.cesium-button {
  background-color: #3f4854;
  color: #e6e6e6;
  fill: #e6e6e6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  line-height: 32px;
}

/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
  bottom: 0;
  left: 40px;
  max-height: 700px;
  margin-bottom: 5px;
}

/**cesium 帮助面板*/
.cesium-navigation-help {
  top: auto;
  bottom: 0;
  left: 40px;
  transform-origin: left bottom;
}

/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
  width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
  float: right;
  margin: 0 3px;
}

/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
  left: 0;
  right: 40px;
  width: auto;
  z-index: 9999;
}
.cesium-geocoder-searchButton {
  background-color: #3f4854;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
  background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
  background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
  background-color: #3f4854;
}

/**cesium info信息框*/
.cesium-infoBox {
  top: 50px;
  background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
  background-color: #3f4854;
}

/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
  top: auto;
  bottom: 35px;
  right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
  color: #fff;
}

/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
  top: 10px;
  left: 10px;
  right: auto;
  background-color: #3f4854;
}
</style>
